<template>
	<view>
		<uv-notify ref="notify" customStyle="z-index:9999"></uv-notify>
		<uv-cell-group>
			<uv-cell>
				<!-- 自定义左侧标题 -->
				<template v-slot:title>
					<uv-search placeholder="单车编号" v-model="bikeId" :clearabled="true" borderColor="#55aaff"
						@custom="searchBikes()"></uv-search>
				</template>
				<!-- 自定义左侧标题下面的内容 -->
				<template v-slot:label>

				</template>
				<!-- 自定义右侧值 -->
				<template v-slot:value>
					<view>
						<uv-button type="warning" text="设置全部单车" @click="toSetAllBike()"></uv-button>
					</view>
					<view>
						<uv-button type="primary" text="添加单车" @click="toAdd()"></uv-button>
					</view>
				</template>
				<!-- 自定义左侧图标 -->
				<template v-slot:icon>
					
				</template>
				<!-- 自定义右侧图标 -->
				<template v-slot:right-icon>
					

				</template>
			</uv-cell>
		</uv-cell-group>



		<zb-table :show-header="true" :columns="column" :stripe="true" :fit="true" @rowClick="rowClick"
			@toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection" :border="true"
			@edit="buttonEdit" @dele="dele" :data="bikesData"></zb-table>
		<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="changePage" />
		<view class="btn-view">
			<view>
				<text class="example-info"
					style="white-space: nowrap;">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
			</view>
			<view class="btn-flex">
				<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
					:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
				<button class="button" type="default" @click="reset">重置数据</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				apiUrl: '',
				setToken: function() {},
				header: {},
				recordsData: [],
				/* 搜索 */
				bikeId: '',
				/* 分页 */
				current: 1,
				total: 10,
				pageSize: 10,
				bikesData: [],
				/* 表格 */
				column: [
					// {
					// 	type: 'selection',
					// 	fixed: true,
					// },
					{
						name: 'bikeId',
						label: '单车编号',
						sorter: true
					},
					{
						name: 'batteryId',
						label: '电池编号',
						sorter: true,

					},
					{
						name: 'switchState',
						label: '开关状态'
					},
					{
						name: 'lightThreshold',
						label: '灯光阈值'
					},
					{
						name: 'latitude',
						label: '经度',
						sorter: true,
					},
					{
						name: 'longitude',
						label: '纬度'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						
						renders: [{
								name: '编辑',
								func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							{
								name: '删除',
								type: 'warn',
								func: "dele"
							},
						]
					},
				],
			}
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
			this.user = uni.getStorageSync('user');
			// setToken是设置header放入token的函数
			this.setToken = getApp().globalData.setToken;
			this.header = this.setToken();
			/* 如果没有用户信息或者无token直接返回登录重新获取 */
			if (this.user == '' || this.setToken == null) {
				this.getUserTokenFail();
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 1000);
			}
			this.getAllBikes();
		},
		methods: {
			/* 成功提示 */
			promptSuccess(msg) {
				this.$refs.notify.success(msg);
			},
			promptFail(msg) {
				this.$refs.notify.error(msg);
			},
			getAllBikes() {
				/* 查询所有可租借的车（无论是否借车） */
				const backendURL = this.apiUrl + "/bicycle/list" + "?pageNum=" + this.current + "&pageSize=" + this
					.pageSize;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: 0.0,
					latitude: 0.0
				}
				let satoken = header.satoken;
				console.log(userLocationDto);
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						let voData = res.data.data.rows;
						this.bikesData = [];
						voData.forEach(e => {
							this.bikesData.push(e.bike)
						})
						this.total = res.data.data.total;
					},
					fail: function(res) {
						console.log('错误', res);
					}
				});

			},
			searchBikes(){
				// console.log(this.bikeId);
				if(this.bikeId=='')
				{
					this.bikesData=[];
					this.getAllBikes();
					return;
				}
				const backendURL = this.apiUrl + "/bicycle/getOne?bikeId="+this.bikeId;
				let header = this.setToken();
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'GET',
					header: {
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						let voData = res.data.data;
						this.bikesData=[];
						this.bikesData.push(voData);
						if(voData==null) this.total = 0;
						else this.total = 1;
					},
					fail: function(res) {
						console.log('错误', res);
					}
				});
				
			},
			buttonEdit(ite,index) {
				uni.navigateTo({
					url:"/pages/tabBar/setBike/setBike?bike=" + encodeURIComponent(JSON.stringify(ite))
				})
			},
			dele(ite,index) {
				console.log(ite);
				const backendURL = this.apiUrl + "/bicycle/deleteOne?bikeId="+ite.bikeId;
				let header = this.setToken();
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'DELETE',
					dataType: 'json',
					header: {

						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						this.promptSuccess("删除成功");
						this.getAllBikes();
					},
					fail: function(res) {
						console.log('错误', res);
						this.promptFail("删除失败");
					}
				});
			},
			toSetAllBike() {
				uni.navigateTo({
					url:"/pages/tabBar/setAllBikes/setAllBikes"
				})
			},
			toAdd() {
				uni.navigateTo({
					url:"/pages/tabBar/add/add"
				})
			},
			/* 分页工具 */
			add() {
				this.pageSize += 10;
				this.getAllBikes();
			},
			reset() {
				this.pageSize = 10;
				this.current = 1;
				this.getAllBikes();
			},
			changePage(e) {
				console.log(e);
				this.current = e.current;
				this.getAllBikes();
			},
		}
	}
</script>

<style>
	/* 分页 */
	.btn-view {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		text-align: center;
		background-color: #fff;
		justify-content: center;
		align-items: center;
	}

	.btn-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.button {
		margin: 20px;
		width: 150px;
		font-size: 14px;
		color: #333;
	}
</style>